<template>
	<view>
		<view v-if="nowid==1">
			<!-- <image class="w-1 absolute-0" style="height: 440rpx;" :src="$path + '/tab4/ubg.png'" mode=""></image> -->
			<view class="top-bg w-1 absolute-0">

			</view>
			<view class="sticky o-h">
				<up-navbar title="共享电工" placeholder leftIconSize="0" bgColor="transparent" :autoBack="false">
					<template #center>
						<view class="c-ff bold fs-36">我的</view>
					</template>
				</up-navbar>
				<!-- <image class="w-1 absolute-0" style="height: 524rpx;" :src="$path + '/tab4/ubg.png'" mode=""></image> -->
			</view>


			<view class="w-1 p-r-30 fl-s-s relative">
				<view class="p-l-30  w-1 fr-s-c" @click="$to('/pages/User/UserInfo')">
					<image class="circle" style="width: 120rpx; height: 120rpx; border: 2rpx solid #ffffff;"
						:src="user.avatar || '/static/logo.png'" mode="aspectFill"></image>
					<view class="flex-1 fl-c-s m-l-20">
						<text class="c-ff fs-32">{{user.nickname || '点击登录'}}</text>
						<text class="c-ff fs-32" style="font-size: 24rpx;margin-top: 14rpx;"
							v-if="!user.mobile">欢迎登录使用共享电工</text>
						<text class="c-ff fs-24 m-t-10">{{user.mobile}}</text>
					</view>
					<image style="width: 44rpx; height: 44rpx;" :src="$path + '/tab4/right.png'" mode=""></image>
				</view>

				<view class="bg-ff br-20 fl-s-s w-1 m-t-15">
					<view class="w-1 fr-b-c p-30" @click="toorder(0)">
						<text class="c-00 fs-28 bold">我的订单</text>
						<!-- <image style="width: 35rpx; height: 35rpx;" :src="$path + '/tab4/rights.png'" mode=""></image> -->
						<view class="" style="display: flex;align-items: center;color: #A1A1A1;font-size: 26rpx;">
							<view class="">
								全部订单
							</view>
							<!-- <image style="width: 44rpx; height: 44rpx;" :src="$path + '/tab4/right.png'" mode="">
							</image> -->
							<up-icon name="arrow-right" color="#A1A1A1" size="14"></up-icon>
						</view>
					</view>
					<view class="w-1 fr-s-c m-b-30">
						<view class="fl-c" @click="toorder(index+1)" v-for="(item,index) in orders" :key="index"
							style="width: 25%;">
							<image style="width: 40rpx; height: 46rpx;margin-bottom: 12rpx;"
								:src="$path + `/tab4/t${index}.png`" mode="">
							</image>
							<text class="c-33 fs-24" style="color: #4E4E4E;">{{item}}</text>
						</view>
					</view>
				</view>
				<view class="tabs bg-ff br-20  w-1 m-t-15">
					<view class="tab" @click="toYH">
						<view class="img-box">
							<image src="https://dg.fuliaoxx.com/imgs/d1.png" mode=""></image>
						</view>
						<view class="" style="flex: 1;text-align: center;font-size: 26rpx;font-weight: 600;">
							我的优惠券
						</view>
					</view>
					<view class="" style="width: 20rpx;">

					</view>
					<view class="tab" style="background-color: #DCFBF7;" @click="toSF">
						<view class="img-box" style="background-color: #B4F7EE;">
							<image src="https://dg.fuliaoxx.com/imgs/d2.png" mode=""></image>
						</view>
						<view class="" style="flex: 1;text-align: center;font-size: 26rpx;font-weight: 600;">
							师傅入驻
						</view>
					</view>
				</view>

				<view class="w-1 bg-ff p-r-30 m-t-20 br-20 fl-s-s">
					<view class="fr-s-c w-1 relative" @click="tonext(item)" v-for="(item,index) in menus" :key="index"
						style="height: 96rpx;">
						<image style="width: 45rpx; height: 52rpx;" :src="$path + `/tab4/mm${index}.png`"
							mode="widthFix">
						</image>
						<view class="h-1 m-l-20 flex-1 fr-b-c" :class="index==5?'':''">
							<text class="c-33 fs-28 bold">{{item.name}}</text>
							<up-icon name="arrow-right"></up-icon>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<button class="w-1 h-1 absolute-0" style="opacity: 0;" v-if="index==1"
							open-type="contact"></button>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>

		<view v-if="nowid==2">
			<usercom ref="suser"></usercom>
		</view>

		<up-tabbar :value="nowid==1?2:2" @change="changeTabindex" activeColor="#01796D" inactiveColor="#A4A4A4">
			<up-tabbar-item text="首页">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}1s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}1.png`">
					</image>
				</template>
			</up-tabbar-item>
			<up-tabbar-item :text="nowid==1?'服务':'接单大厅'" :badge="nowid==1?null:num">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;"
						:src="nowid==1?'/static/images/tabbar/2s.png':'/static/images/tabbar/t3s.png'"></image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;"
						:src="nowid==1?'/static/images/tabbar/2.png':'/static/images/tabbar/t3.png'"></image>
				</template>
			</up-tabbar-item>
			<!-- 			<up-tabbar-item v-if="nowid==1" text="订单">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}3s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}3.png`">
					</image>
				</template>
			</up-tabbar-item> -->
			<up-tabbar-item text="我的">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}4s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}4.png`">
					</image>
				</template>
			</up-tabbar-item>
		</up-tabbar>
	</view>

</template>

<script setup>
	import {
		storeToRefs
	} from 'pinia';
	import useUserStore from '@/stores/user.js';
	const {
		nowid
	} = storeToRefs(useUserStore())
	// const {getnum} = useUserStore()

	uni.hideTabBar()
	const tindex = ref(2)
	const changeTabindex = val => {
		console.log(val)
		let arr = nowid.value == 1 ? ['/pages/index/index', '/pages/Classify/Classify',
			'/pages/User/User'
		] : ['/pages/index/index', '/pages/Order/Order', '/pages/User/User'];
		uni.switchTab({
			url: arr[val]
		})
	}


	import usercom from '@/pages/seconds/User.vue'

	const suser = ref(null)
	import {
		reactive
	} from 'vue';

	const orders = reactive([
		'待接单',
		'已接单',
		'服务中',
		'已完成',
		// '全部订单',
	])


	const menus = reactive([
		// {
		// 	name: '我的优惠券',
		// 	url: '/pages/User/MyCoupon'
		// },
		{
			name: '地址管理',
			url: '/pages/User/Address/Address'
		},
		// {
		// 	name: '师傅入驻',
		// 	url: '/pages/User/MasterSettledIn'
		// },
		{
			name: '客服中心',
			url: ''
		}, {
			name: '意见反馈',
			url: '/pages/User/FeedBack'
		}, {
			name: '设置',
			url: '/pages/User/Set'
		}
	])

	function tonext(item) {
		if (item.url) {
			uni.$to(item.url)
		} else {
			// #ifdef APP-PLUS
			console.log('企业微信')
			// #endif
		}
	}

	function toYH() {
		uni.$to('/pages/User/MyCoupon')
	}

	function toSF() {
		uni.$to('/pages/User/MasterSettledIn')
	}

	const user = ref('')
	const selectedCity = ref("")
	const selectedProvince = ref("")
	onLoad(() => {

		if (nowid.value == 1) {
			user.value = uni.getStorageSync('user') || '';
		}
	})

	const num = ref(0);
	onShow(() => {
		if (nowid.value == 1) {
			if (uni.getStorageSync('user')) {
				getuser()
			}
		} else {
			if (uni.getStorageSync("city")) {
				selectedCity.value = uni.getStorageSync("city");
				selectedProvince.value = uni.getStorageSync("selectedProvince");
			} else {
				selectedCity.value = {

				}
				selectedProvince.value = {

				}
			}
			let para = {
				type: 1,
				page: 1,
				pageSize: 200,
				city: selectedCity.value.name || undefined
			}
			if (!selectedCity.value.name) {
				delete para.city
			}
			uni.$get({
				url: '/api/Ordersystem/Takingorders',
				data: para
			}).then(res => {
				num.value = res.data.length;
			})
		}
	})

	function toorder(index) {
		uni.setStorageSync('oindex', index)
		uni.navigateTo({
			url: '/pages/Order/Order2?index=' + (index + 1)
		})
	}


	function getuser() {
		if (!uni.getStorageSync('user')) return;
		uni.$post({
			url: '/api/User/Userinfo',
			// url:'/api/User/getmybasic',
			loading: false
		}).then(res => {
			user.value = res.data;
			let token = uni.getStorageSync('user').token
			user.value.token = token;
			uni.setStorageSync('user', user.value)
		})
	}
</script>

<style>
	page {
		background: #f1f5f6;
	}
</style>

<style scoped lang="scss">
	.top-bg {
		height: 440rpx;
		background: linear-gradient(to bottom, #007674, #007674, #f1f5f6);
	}

	.tabs {
		display: flex;
		padding: 20rpx;

		.tab {
			display: flex;
			align-items: center;
			flex: 1;
			background-color: #FFF1E7;
			border-radius: 20rpx;

			.img-box {
				background-color: #FDD4B7;
				width: 100rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx 0 0 20rpx;
			}

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>